const r = `<!--\r
 * @Author: Quarter\r
 * @Date: 2022-07-07 19:28:37\r
 * @LastEditors: Quarter\r
 * @LastEditTime: 2024-10-22 15:04:27\r
 * @FilePath: /simple-ui/packages/documents/src/views/desktop/divider/default-divider.vue\r
 * @Description: 分割线示例文件\r
-->\r
<template>\r
  <s-form label-width="8em" colon="：">\r
    <s-form-item label="分割线布局">\r
      <s-radio-group v-model="options.layout" :options="layoutList"></s-radio-group>\r
    </s-form-item>\r
    <s-form-item label="分割线主题">\r
      <s-radio-group v-model="options.theme" :options="themeList"></s-radio-group>\r
    </s-form-item>\r
    <s-form-item label="分割线对齐">\r
      <s-radio-group v-model="options.align" :options="alignList"></s-radio-group>\r
    </s-form-item>\r
    <s-form-item label="是否显示文本">\r
      <s-radio-group v-model="options.label" :options="isOrNotList"></s-radio-group>\r
    </s-form-item>\r
    <s-form-item label="是否虚线">\r
      <s-radio-group v-model="options.dashed" :options="isOrNotList"></s-radio-group>\r
    </s-form-item>\r
    <s-form-item label="分割线示例">\r
      <span>富强</span>\r
      <s-divider\r
        :layout="options.layout"\r
        :theme="options.theme"\r
        :align="options.align"\r
        :dashed="options.dashed"\r
      >\r
        <template v-if="options.label" #default>SimpleUI</template>\r
      </s-divider>\r
      <span>民主</span>\r
      <s-divider\r
        :layout="options.layout"\r
        :theme="options.theme"\r
        :align="options.align"\r
        :dashed="options.dashed"\r
      >\r
        <template v-if="options.label" #default>SimpleUI</template>\r
      </s-divider>\r
      <span>文明</span>\r
      <s-divider\r
        :layout="options.layout"\r
        :theme="options.theme"\r
        :align="options.align"\r
        :dashed="options.dashed"\r
      >\r
        <template v-if="options.label" #default>SimpleUI</template>\r
      </s-divider>\r
      <span>和谐</span>\r
    </s-form-item>\r
  </s-form>\r
</template>\r
\r
<script lang="ts">\r
import {\r
  DIVIDER_ALIGN_DEFAULT,\r
  DIVIDER_ALIGN_LABEL,\r
  DIVIDER_ALIGN_OPTIONS,\r
  DIVIDER_LAYOUT_DEFAULT,\r
  DIVIDER_LAYOUT_LABEL,\r
  DIVIDER_LAYOUT_OPTIONS,\r
  DIVIDER_THEME_DEFAULT,\r
  DIVIDER_THEME_LABEL,\r
  DIVIDER_THEME_OPTIONS,\r
} from "@smartcity/simple-ui";\r
import { Component, Vue } from "vue-property-decorator";\r
\r
@Component\r
export default class DefaultDivider extends Vue {\r
  /**\r
   * @description: 布局可选项列表\r
   * @private\r
   * @readonly\r
   * @type {Array<Object>}\r
   */\r
  readonly layoutList = DIVIDER_LAYOUT_OPTIONS.map((layout) => ({\r
    value: layout,\r
    label: DIVIDER_LAYOUT_LABEL.get(layout),\r
  }));\r
\r
  /**\r
   * @description: 主题可选项列表\r
   * @private\r
   * @readonly\r
   * @type {Array<Object>}\r
   */\r
  readonly themeList = DIVIDER_THEME_OPTIONS.map((theme) => ({\r
    value: theme,\r
    label: DIVIDER_THEME_LABEL.get(theme),\r
  }));\r
\r
  /**\r
   * @description: 主题可选项列表\r
   * @private\r
   * @readonly\r
   * @type {Array<Object>}\r
   */\r
  readonly alignList = DIVIDER_ALIGN_OPTIONS.map((align) => ({\r
    value: align,\r
    label: DIVIDER_ALIGN_LABEL.get(align),\r
  }));\r
\r
  /**\r
   * @description: 禁用列表\r
   * @private\r
   * @readonly\r
   * @type {Array<Object>}\r
   */\r
  readonly isOrNotList = [\r
    { value: false, label: "否" },\r
    { value: true, label: "是" },\r
  ];\r
\r
  /**\r
   * @description: 组件配置项\r
   * @private\r
   * @type {Object}\r
   */\r
  options = {\r
    layout: DIVIDER_LAYOUT_DEFAULT, // 布局\r
    theme: DIVIDER_THEME_DEFAULT, // 主题\r
    align: DIVIDER_ALIGN_DEFAULT, // 对齐方式\r
    label: false, // 是否显示文本\r
    dashed: false, // 是否虚线\r
  };\r
}\r
<\/script>\r
\r
<style lang="scss" scoped></style>\r
`; export { r as default };
